<template>
	<view class="container">
		<view class="example-body">
			<uni-steps :options="list" active-color="#8AB46C" :active='2'/>
		</view>
		<view class="common_info">家庭信息</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>户籍类别
			</view>
			<view class="picker_class">
				<radio-group @change="handleCensusChange" v-model="userInfo.inputeCensus">
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);" />城镇居民
					</label>
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);margin-left:10upx" />农村居民
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>独生子女
			</view>
			<view class="picker_class">
				<radio-group @change="handleOnlyChange" v-model="userInfo.inputOnly">
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);" />独生子女
					</label>
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);margin-left:10upx" />非独生子女
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>婚姻状况
			</view>
			<view class="picker_class">
				<radio-group @change="handleMarrigeChange" v-model="userInfo.inputMarrige">
					<label class="radio">
						<radio value="0" style="transform: scale(0.6);" />已婚
					</label>
					<label class="radio">
						<radio value="1" checked="true" style="transform: scale(0.6);margin-left:10upx" />未婚
					</label>
					<label class="radio">
						<radio value="2" style="transform: scale(0.6);margin-left:10upx" />离异
					</label>
					<label class="radio">
						<radio value="3" style="transform: scale(0.6);margin-left:10upx" />其他
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 240upx;">
				<span style="color: red;">*</span>本人手机号
			</view>
			<input type="tel" v-model="userInfo.inputPhone" placeholder="请输入手机号" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>家庭电话
			</view>
			<input type="tel" v-model="userInfo.inputFPhone" placeholder="请输入号码" class="picker_class" />
		</view>
		<view class="hint_text">没有固话可以填写手机号</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>家庭住址
			</view>
			<textarea maxlength="140" v-model="userInfo.inputAddress" type="text" placeholder="请输入家庭住址" class="picker_content_class" />
		</view>
		<view class="hint_text">请具体到门牌号，例如明湖小区1-1-101，或明湖村1号</view>
		<view class="group_item">
			<view class="group_title" style="width: 300upx;">
				<span style="color: red;">*</span>家庭住址邮编
			</view>
			<input type="tel" v-model="userInfo.inputPost" placeholder="请输入邮编" class="picker_class" />
		</view>
		<!-- 防止按钮遮挡的空view -->
		<!-- <view style="height: 120upx;width: 100%;background: #FBFBFB;"></view> -->
		<button type="primary" class="button_class" @click="navTo('../conscription/ApplyMilitary')">下一步</button>
		<!-- <button type="primary" class="button_class" @click="addUserInfo">保存</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '基本信息',
					url:'../conscription/apply'
				}, {
					title: '学业信息',
					url:'../conscription/applyStudy'
				}, {
					title: '家庭信息'
				}, {
					title: '参军信息'
				}],
				userInfo: {
					inputeCensus: "",
					inputOnly: "",
					inputMarrige:"",
					inputPhone:"",
					inputFPhone:"",
					inputAddress:"",
					inputPost:""
				},
			}
		},
		onLoad(option) {
			// console.log(option.item)
			// if (option) {
			// 	this.userInfo = JSON.parse(decodeURIComponent(option.item))
			// }
			// console.log(this.userInfo.inputName)
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			addUserInfo() {
				uni.navigateBack()
			},
			handleCensusChange(e) {
				this.userInfo.inputCensus = e.detail.value
			},
			handleOnlyChange(e){
				this.userInfo.inputOnly = e.detail.value
			},
			handleMarrigeChange(e){
				this.userInfo.inputMarrige = e.detail.value
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}
	.example-body {
		position: fixed;
		width: 100%;
		padding: 16upx 0 16upx 0;
		font-size: 30upx;
		background-color: #fbfbfb;
		z-index: 99;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.common_info {
		margin-top: 100upx;
		color: #fff;
		font-weight: bold;
		background: #8AB46C;
		width: 160upx;
		/* height: 50upx; */
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		/* letter-spacing: 4upx; */
		border-radius: 0 30upx 30upx 0;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		/* position: fixed; */
		/* bottom: 40upx; */
		margin-top: 20upx;
		margin-left: 10%;
		margin-bottom: 40upx;
		width: 80%;

		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #8AB46C !important;
		color: white
	}

	.hint_text {
		color: #999;
		padding: 0 30upx;
		font-size: 24upx;
	}
</style>
